<template>
	<div class="custom-form">
		<el-row :gutter="15">
			<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" :key="showFormKey"
				v-if="showForm">
				<el-col :span="24">
					<el-form-item :label="$t('新用户名')" prop="F_Account">
						<el-input v-model="formData['F_Account']" placeholder="请输入新用户名"clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label="$t('新手机号')" prop="F_Telephone">
						<el-input v-model="formData['F_Telephone']" placeholder="请输入新手机号" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item size="large" v-if="isEdit" class="form-button-center">
						<el-button type="primary" @click="submitForm" :loading="submitLoading" style="background-color: #409EFF;color: #fff;">
							{{submitLoading?$t('workFlow.WFMenu.hintSubmit'):$t('submit')}}
						</el-button>
						<el-button @click="cancelForm">{{$t('cancelText')}}</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
	</div>
</template>
<script>
	import authorizeMixin from "@/mixins/authorize";
	import {
		baseUrl
	} from "@/config/env";
	import request from "@/router/axios";
	import {
		formValidateNotice
	} from '@/util/util';
	export default {
		components: {},
		props: ['keyValue', 'isEdit', 'disabled'],
		data() {
			return {
				userInfo: {},
				id:localStorage.getItem('fuserid'),
				submitLoading: false,
				showForm: true,
				showFormKey: 1,
				reRenderSubform: false,
				operationVal: 'add',
				isAdd: true,
				//_FORM_ADDRESS_URL_,
				autoCompleteConfEventData: [],
				mainTableName: 'table0',
				formConfig: {},
				formFieldsMap: new Map(),
				hideComponentsMap: new Map(),
				needShowValueTags: ['asso-popup', 'mutiple-popup'],
				formData: {
					'F_Account': null,
					'F_Telephone': null,
				},
				rules: {
					F_Account: [{
						required: false,
						message: '请输入新用户名',
						trigger: 'blur'
					}],
					F_Telephone: [{
							required: false,
							message: '请输入新手机号',
							trigger: 'blur'
						},
						{
							pattern: /^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/,
							message: '请输入正确的手机号',
							trigger: 'blur'
						}
					],
				},
			}
		},
		computed: {},
		watch: {},
		async created() {
			console.log(this.id)
			this.formConfig = this.getFormConfig();
			this.formFieldsMap = this.getFormFieldsMap();
			this.userInfo = localStorage.getItem("avue-userInfo") ? JSON.parse(localStorage.getItem(
				"avue-userInfo")).content : {};
				
		},
		async mounted() {
			this.hideComponentsMap = await this.getHideComponentsMap();
			this.showForm = false;
			await this.insertCreatedEvent();
			//TODO   再这里做数据回填 请求表单数据
			//用于占位
			await this.insertMountedEvent();
			this.reRenderSubform = true; //子表单显示
			this.showFormKey++;
			this.processParameterAssignment();
			this.showForm = true;
		},
		methods: {
			getFormData() {
				let key = 'xjrBaseUserDto';
				let returnParams = {};
				returnParams = this.formData;
				return {
					...returnParams,
				};
			},
			validateForm() {
				this.$refs['elForm'].validate(valid => {});
			},
			async aysncValidateForm() {
				let validataArry = []
				let formValidateNotice = function formValidateNotice(obj, that, formAuth) {
					for (var o in obj) {
						if (!formAuth[o] && obj[o][0]) {
							that.$message({
								message: obj[o][0].message + ',' + that.$t('noFormAuth'),
								type: 'warning'
							});
							return;
						}
					}
				}
				validataArry.push(new Promise((resolve, reject) => {
					this.$refs['elForm'].validate((valid, object) => {
						if (!this.isWorkflowForm) formValidateNotice(object, this, this
							.formEnCodeList)
						resolve(valid)
					})
				}))
				let res = await Promise.all(validataArry)
				if (res.includes(false)) {
					return false
				} else {
					return true;
				}
			},
			changeTableData() {},
			async submitForm() {
				this.submitLoading = true;
				let valid = await this.aysncValidateForm();
				if (valid == false) {
					this.submitLoading = false;
					return false;
				}
				this.changeTableData();
				//格式化数据
				let newObj = this.getFormData();
				//如果没有传入参数就是新增
				if (!this.formData.F_Account && !this.formData.F_Telephone) {
					this.$notify({
						  title: "失败", 
						  message: "请输入新用户名或手机号",
						  type: "warning",
						});
						this.submitLoading = false;
						}
				else if(this.formData.F_Account == null || this.formData.F_Telephone == null){
					request({
						url: baseUrl + "/t_barin_user_registration/" + this.id,
						method: "put",
						data: newObj
					}).then((res) => {
						this.submitLoading = false;
						this.$notify({
							title: "成功",
							message: "修改成功",
							type: "success",
						});
						this.$emit("onChange", true)
					});
				}
				await this.handleSubmit();
			},
			cancelForm() {
				this.$emit("onChange", true)
			},
			formatTree(data, valueField, lableField, childField, type) {
				let tree = [];
				data.forEach((node, index) => {
					let newNode = {
						value: node[valueField],
						label: node[lableField],
					};
					if (type) {
						newNode.disabled = node[valueField] == undefined ? true : false
					}
					tree.push(newNode);
					if (node[childField] != null && node[childField].length > 0) {
						newNode.children = (this.formatTree(node[childField], valueField, lableField, childField,
							type));
					}
				}, this);
				return tree;
			},
			//__WORKFLOWFORMHANDLEMETHODS__
			//FORM_EVENT_EDIT
			//__SUMIBTHANDLEMETHODS__
			async triggerEventHandler(eventData) {
				if (eventData.length > 0) {
					eventData.forEach(ele => {
						let functionName = 'getField' + ele.componentFormId + 'Options';
						if (typeof this[functionName] == "function") {
							this[functionName]();
						}
					})
				}
			},
			triggerEventFormIdHandler(formId) {
				if (this.formFieldsMap.get(formId).__config__.triggerEvents && this.formFieldsMap.get(formId).__config__
					.triggerEvents.length > 0) {
					this.formFieldsMap.get(formId).__config__.triggerEvents.forEach(triggerEventItem => {
						if (this.formFieldsMap.get(formId).__config__.triggerEventData && this.formFieldsMap.get(
								formId)
							.__config__.triggerEventData[triggerEventItem] && this.formFieldsMap.get(formId)
							.__config__
							.triggerEventData[triggerEventItem].length > 0) {
							this.triggerEventHandler(this.formFieldsMap.get(formId).__config__.triggerEventData[
								triggerEventItem]);
						}
					});
				}
				return true;
			},
			//清空联想弹层、多选弹层的值
			clearBombLayerFormData(filed) {
				this.formData[filed] = '';
				this.formData[filed + '_showValue'] = '';
			},
			// 流程参数赋值
			processParameterAssignment() {
				// 流程中的流程参数赋值 优先级最高，最后赋值
				setTimeout(() => {
					if (this.isEdit != 2 && this.parameter && this.parameter[this.mainTableName]) {
						this.showForm = false;
						for (let [key, value] of Object.entries(this.parameter[this.mainTableName])) {
							this.setFormDataValue(key, value);
						}
						this.showForm = true;
					}
				}, 0);
			},
			setFormDataValue(field, val) {
				if (Array.isArray(this.formData[field])) {
					if (val.includes(',')) {
						this.formData[field] = val.split(',');
					} else {
						this.formData[field] = [val];
					}
				} else {
					this.formData[field] = val;
				}
				//处理联想弹层，多选弹层
				if (this.formData[field + '_showValue'] != undefined) {
					this.formData[field + '_showValue'] = val;
				}
			},
			setOutputsValue(nodeType, formId, res, outputKey) {
				let nodeTypeChecked = false;
				if (nodeType == 'created') {
					nodeTypeChecked = this.operationVal == 'add';
				} else if (nodeType == 'edit') {
					nodeTypeChecked = this.operationVal == 'edit';
				} else if (nodeType == 'mounted') {
					nodeTypeChecked = this.operationVal == 'add' || this.operationVal == 'edit';
				}
				if (nodeTypeChecked && this.disabled != true && res && res.data && res.data.data && this.formFieldsMap
					.has(formId) && this.formFieldsMap.get(formId).__vModel__ && this.formData.hasOwnProperty(this
						.formFieldsMap.get(formId).__vModel__)) {
					this.setFormDataValue(this.formFieldsMap.get(formId).__vModel__, res.data.data[outputKey]);
					// 联想弹层 多选弹层 特殊处理
					if (this.formFieldsMap.get(formId).__config__ && this.formFieldsMap.get(formId).__config__.avueType &&
						this.needShowValueTags.includes(this.formFieldsMap.get(formId).__config__.avueType)) {
						this.formData[this.formFieldsMap.get(formId).__vModel__ + '_showValue'] = res.data.data[outputKey];
					}
					this.triggerEventFormIdHandler(formId);
				}
			},
			//子表单权限
			getAuthorityTableChildrenList(bindTable, children) {
				let column = [];
				if (bindTable && this.formEnCodeList && this.formEnCodeList[bindTable]) {
					let formSubEnCodeList = this.formEnCodeList[bindTable];
					if (children && children.length > 0) {
						column = children.map(ele2 => {
							if (formSubEnCodeList.includes(ele2.prop)) {
								ele2.hide = false;
							} else {
								ele2.hide = true;
							}
							if (ele2.hide == false) {
								//工作流中系统表单必填权限
								if (this.formSubTableNotRequiredList && this.formSubTableNotRequiredList[
									bindTable] !=
									undefined) {
									if (this.formSubTableNotRequiredList[bindTable].includes(ele2.prop)) {
										ele2.required = false;
									} else {
										ele2.required = true;
									}
								}
								ele2.rules = [];
								if (ele2.required) {
									ele2.rules = ele2.ruleList;
								}
								// disabled 属性
								if (this.formSubTableDisabledList && this.formSubTableDisabledList[bindTable] !=
									undefined) {
									if (this.formSubTableDisabledList[bindTable].includes(ele2.prop)) {
										ele2.disabled = true;
									} else {
										ele2.disabled = false;
									}
								}
								if (this.disabled) { //查看
									ele2.disabled = true;
								}
							} else {
								ele2.rules = []
								if (ele2.required) {
									ele2.ruleList.forEach(el => {
										el.message += ',' + this.$t('noFormAuth')
									})
									ele2.rules = ele2.ruleList;
								}
							}
							return ele2;
						});
					}
					return column;
				} else {
					return children;
				}
			},
			async insertCreatedEvent() {
				//FORM_EVENT_CREATED
			},
			async insertMountedEvent() {
				//FORM_EVENT_MOUNTED
			},
			async insertEditEvent() {
				//FORM_EDIT_STR
			},
			async insertSubmitEvent() {
				//FORM_SUBMIT_STR
			},
			getFormConfig() {
				//FORM_CONFIG_START
				let config = {
					"fields": [{
						"__config__": {
							"label": "新用户名",
							"labelWidth": null,
							"showLabel": true,
							"changeTag": true,
							"tag": "el-input",
							"tagIcon": "input",
							"avueType": "input-tip",
							"required": true,
							"layout": "colFormItem",
							"span": 24,
							"document": "https://element.eleme.cn/#/zh-CN/component/input",
							"F_LgMarkCode": "",
							"regList": [],
							"triggerEvents": ["blur"],
							"triggerEventData": {
								"blur": []
							},
							"prestrainField": "",
							"formId": 100,
							"renderKey": "1001716170379168"
						},
						"__slot__": {
							"prepend": "",
							"append": ""
						},
						"placeholder": "请输入新用户名",
						"style": {
							"width": "100%"
						},
						"clearable": true,
						"prefix-icon": "",
						"suffix-icon": "",
						"maxlength": null,
						"show-word-limit": false,
						"readonly": false,
						"disabled": false,
						"__vModel__": "F_Account"
					}, {
						"__config__": {
							"label": "新手机号",
							"labelWidth": null,
							"showLabel": true,
							"changeTag": true,
							"tag": "el-input",
							"tagIcon": "input",
							"avueType": "input-tip",
							"required": true,
							"layout": "colFormItem",
							"span": 24,
							"document": "https://element.eleme.cn/#/zh-CN/component/input",
							"F_LgMarkCode": "",
							"regList": [],
							"triggerEvents": ["blur"],
							"triggerEventData": {
								"blur": []
							},
							"prestrainField": "",
							"formId": 101,
							"renderKey": "1011716170380585"
						},
						"__slot__": {
							"prepend": "",
							"append": ""
						},
						"placeholder": "请输入新手机号",
						"style": {
							"width": "100%"
						},
						"clearable": true,
						"prefix-icon": "",
						"suffix-icon": "",
						"maxlength": null,
						"show-word-limit": false,
						"readonly": false,
						"disabled": false,
						"__vModel__": "F_Telephone"
					}]
				};
				return config;
				//FORM_CONFIG_END
			},
			getFormFieldsMap() {
				//FORM_CONFIG_MAP_START
				let config = [
					[100, {
						"__vModel__": "F_Account",
						"__config__": {
							"avueType": "input-tip",
							"triggerEvents": ["blur"],
							"triggerEventData": {
								"blur": []
							},
							"autoHandlerConfig": null
						}
					}],
					[101, {
						"__vModel__": "F_Telephone",
						"__config__": {
							"avueType": "input-tip",
							"triggerEvents": ["blur"],
							"triggerEventData": {
								"blur": []
							},
							"autoHandlerConfig": null
						}
					}]
				];
				return new Map(config);
				//FORM_CONFIG_MAP_END
			},
			async getHideComponentsMap() {
				let mapList = new Map();
				let hideComponentList = this.getHideComponents();
				if (typeof this.initHideComponentList == 'function') {
					mapList = await this.initHideComponentList(hideComponentList);
					this.$store.commit("SET_HIDE_COMPONENT_LIST", mapList);
				}
				return mapList;
			},
			getHideComponentsMapItem(key) {
				if (this.hideComponentsMap.size > 0) {
					return this.hideComponentsMap.has(key) ? this.hideComponentsMap.get(key) : "";
				} else {
					return ""
				}
			},
			getHideComponents() {
				//FORM_HIDE_COMPONENTS_START
				let config = [];
				return config;
				//FORM_HIDE_COMPONENTS_END
			},
		}
	}
</script>
<style>
	.el-table__empty-block {
		width: 100% !important;
	}

	.avue-form__row {
		padding: 0 !important;
	}

	#editorphone {
		width: 375px;
		margin: 0 auto;
		border: 1px solid #E4E7ED;
		padding: 0 7.5px;
		background: #f5f6fa;
		height: 700px;
		overflow-y: auto;
		overflow-x: hidden;
		border-radius: 5px;
	}

	#editorphone .el-col {
		border-bottom: 1px solid #F2F2F2;
		background: #fff;
		margin-bottom: 0;
		padding: 0 15px 6px !important;
		width: 100%;
	}

	#editorphone .el-form-item__label {
		line-height: 20px
	}

	#editorphone .el-input-group .el-input__inner {
		background: #f5f6fa
	}

	#editorphone .el-input__inner {
		border: 0
	}

	#editorphone .el-input-group__append,
	#editorphone .el-input-group__prepend {
		border: 0;
		background: #edeef2;
		color: #666;
	}

	#editorphone .el-input-group .el-input__prefix {
		left: 44px
	}

	#editorphone .el-input-group .el-input__suffix {
		right: 44px
	}

	#editorphone .el-form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-flow: wrap;
	}

	#editorphone .el-form-item__label {
		float: none;
		min-width: 85px;
		width: auto !important;
		text-align: left;
		flex: auto;
	}

	#editorphone .tinymce .el-form-item__label {
		min-width: 100%;
	}

	#editorphone .el-form-item__content {
		margin-left: 0px !important;
		flex: auto;
		width: calc(100% - 95px);
	}

	#editorphone .avueFormNoLable .el-form-item__label,
	#editorphone .avueFormNoLable .avue-crud__pagination {
		display: none;
	}

	#editorphone .avueFormNoLable .el-collapse-item__wrap,
	#editorphone .avueFormNoLable .el-collapse {
		border-bottom: 0
	}

	#editorphone .avueFormNoLable .el-col {
		border-bottom: 0;
		padding-bottom: 0
	}

	#editorphone .el-form-item__content .el-button:first-child {
		margin-left: 90px;
	}
	/* .el-button {
		background-color: #409EFF;
		color: #ffffff;
		border: none;
	}
	
	.el-button:hover {
		background-color: rgba(64, 158, 255, 0.5);
		color: #ffffff;
		border: none;
	}
	
	.el-button:focus {
		background-color: transparent;
		color: rgba(64, 158, 255, 0.5);
		border: none;
	}
	
	.el-button:not(:focus) {
		background-color: transparent;
		color: #409EFF;
		border: none;
	} */
</style>
